<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 点击按钮获取新闻事件 -->
    <button>点击获取新闻数据</button>
    <script>
        // 给按钮绑定点击事件
        // 1-获取按钮
        let btn = document.querySelector('button')
        // 2-给按钮绑定点击事件
        btn.onclick = function () {
            // 发起请求



            // 创建对象
            let xhr = new XMLHttpRequest()
            // 建立连接
            xhr.open('GET')
            // 发送请求
            // 发送请求中可以携带数据
            // 注意，数据在发送前需要转换类型

            xhr.send()
            // 监听状态的变化
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    // 请求完成，获取服务器返回的数据
               
                 console.log(xhr.responseText);
                console.log(JSON.parse(xhr.responseText));
                let singer={
                    name:'周杰伦',
                    age:46,
                    gender:'s',
                    personalSons:['晴天','青花瓷','枫','稻香','一路向北','']
                }
                console.log(singer);
                
                console.log(JSON.stringify(singer));
                
                }

            }
        }


    </script>
</body>

</html>